<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>标签列表</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/dist/js/adminlte.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="/dist/css/skins/skin-blue.min.css">

    <style>

        .update{
            display: inline;
            padding-left: 5px;
            padding-right: 5px;
            background: #00BCD4;
            color: white;
            border-right-width: 2px;
            margin-right: 5px;
        }

        .delete{
            display: inline;
            padding-left: 5px;
            padding-right: 5px;
            background: red;
            color: white;
            border-right-width: 2px;
            margin-right: 5px;
        }

        .cvs{
            position:fixed;
            height:100%;
            width:100%;
            background: rgba(43, 28, 47, 0.58);
            z-index:9999999;
            overflow: hidden;
        }
        .cvs .newModWin {
            position: relative;
            width:450px;
            height:400px;
            margin:0 auto ;
            top:80px;
            right: 170px;
            background: white;
        }

        .cvs .newModWin .title {
            position:absolute;
            width:340px;
            height:50px;
            line-height:50px;
            font-size:24px;
            padding-left:55px;
            background:#ebedf2;
        }
        .cvs .newModWin .close{
            position:absolute;
            left:342px;
            right:0px;
            padding-right:10px;
            height:50px;
            line-height:50px;
            font-size:24px;
            text-align:right;
            background:#ebedf2;
            cursor: pointer;

        }

        .cvs .newModWin .logWin{
            position: relative;
            top:100px;
            width:450px;
        }

        .cvs .newModWin .logWin .inp {
            display: block;
            margin-left:25px;
            width:380px;
            height:35px;
            margin-bottom:20px;
            padding-left:30px;
            border:1px solid lightseagreen;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            line-height: 35px;
            font-size:20px;
        }


        .su_btn{
            display: block;
            margin-left:26px;
            width:400px;
            height:45px;
            border:none;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            background-color: crimson;
            font-size:18px;
            color: white;
        }

    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header th:include="admin_public :: header" class="main-header">
    </header>

    <!-- Left side column. contains the logo and sidebar -->
    <aside th:include="admin_public :: sidebar" class="main-sidebar">
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">



        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <br>
                        <div class="cvs" style="display:none" id="cvs2_logon">
                            <div class="newModWin">
                                <div class="title">添加新标签</div>
                                <div class="close" id="cvs2_close" onclick="close_win()">X</div>

                                <div class="logWin">
                                        <input type="text" id="LabelName" class="inp name" name="labelName" placeholder="请输入标签名" />
                                        <input type="text" id="LabelNumber" class="inp number" name="labelNumber" placeholder="请输入标签序号" />
                                        <input type="submit" id="btn" class="su_btn" onclick="addLabel()" value="确定" />

                                </div>
                            </div>
                        </div>
                        <div id="nav1">
                            <div id="login">
                                <button href="javascript:void(0)" class="btn btn-success" onclick="showWin()">新增</button>
                            </div>
                        </div>

                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example2" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标签名</th>
                                    <th>序号</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="tb">
                                <tr th:each="label:${label}">
                                    <td th:text="${label.id}"></td>
                                    <td th:text="${label.labelName}"></td>
                                    <td th:text="${label.labelNumber}"></td>
                                    <td>
                                        <div class="update"><a th:href="@{'/admin/label/optionLabel?id='+${label.id}}">更改</a></div>
                                        <div class="delete"><a th:href="@{'/admin/label/deleteLabel?id='+${label.id}}">删除</a></div>
                                    </td>
                                </tr>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer th:include="admin_public :: footer" class="main-footer">
    </footer>

    <!-- Control Sidebar -->
    <aside th:include="admin_public :: control" class="control-sidebar control-sidebar-dark">
    </aside>

    <div class="control-sidebar-bg">
    </div>

    <script>
        function showWin(){
            $("#cvs2_logon").show();
        }

        function close_win(){
            $("#cvs2_logon").hide();
        }

        function addLabel() {
            var label = {
                //id : $("#LabelId").html(),
                labelName : $("#LabelName").val(),
                labelNumber : $("#LabelNumber").val(),
            };
            $.ajax({
                type: 'post',
                url: "/admin/label/addLabel",
                //headers: {'Content-type': 'application/json;charset=UTF-8'},
                contentType : 'application/json;charset=UTF-8',
                dataType: "json",
                data : JSON.stringify(label),
                success : function(result) {
                    alert("添加成功");
                    window.location.href="/admin/label/editLabels"
                },
                error : function(result){
                    alert("失败了");
                }
            })
        }

    </script>


</div>
</body>
</html>
